<template>
  <div id="app">
    <mu-container class="login-box">
      <mu-flex justify-content="end" align-items="center" class="login-img">
        <img src="../../assets/img/epichust-le.png" />
      </mu-flex>
      <mu-text-field
        ref="username"
        v-model="user.account"
        :label="$t('base.username')"
        label-float
        help-text
        icon="account_circle"
        :error-text="usernameText"
      ></mu-text-field>
      <mu-text-field
        ref="password"
        v-model="user.password"
        v-on:keyup.enter="signIn"
        :label="$t('base.password')"
        label-float
        icon="locked"
        :error-text="passwordText"
        :action-icon="visibility ? 'visibility' : 'visibility_off'"
        :action-click="() => (visibility = !visibility)"
        :type="visibility ? 'text' : 'password'"
      ></mu-text-field>
      <mu-flex justify-content="between" align-items="center" class="check-box">
        <mu-button flat ref="selectLangs" @click="langsOpen = !langsOpen"
          >语言/langs：{{ selectLang }}</mu-button
        >
        <mu-checkbox
          class="mu-checkbox"
          v-model="user.remember"
          :label="$t('base.remember_me')"
          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
        ></mu-checkbox>
      </mu-flex>
      <mu-button
        round
        class="login-btn"
        style="letter-spacing: 2px"
        full-width
        color="primary"
        @click="signIn()"
        v-loading="loginLoading"
        data-mu-loading-size="24"
        >{{ $t("base.sign_in") }}</mu-button
      >
      <!-- 更新下载 -->
    </mu-container>
    <mu-dialog
      width="360"
      transition="slide-bottom"
      fullscreen
      :open.sync="openFullscreen"
    >
      <mu-appbar
        color="primary"
        :title="$t('message.message_login_update_down')"
      ></mu-appbar>
      <div class="download-modal">
        <mu-flex class="linear-progress">
          <mu-linear-progress
            :value="linear"
            size="18"
            mode="determinate"
            color="green"
          ></mu-linear-progress>
        </mu-flex>
        <div style="margin-top: 10vh">
          {{ $t("message.message_login_update_downing") }}
        </div>
        <div class="percent">{{ linear }}%</div>
      </div>
    </mu-dialog>
    <!-- 选择工厂 -->
    <mu-dialog
      :title="$t('message.message_login_choose_factory')"
      width="360"
      max-width="500"
      scrollable
      :open.sync="openSimple"
    >
      <mu-list>
        <mu-list-item :key="index" v-for="(factory, index) in factoryList">
          <mu-list-item-content>
            <mu-radio
              :value="factory.siteCode"
              :label="factory.siteName + '(' + factory.siteCode + ')'"
              v-model="factoryCode"
            ></mu-radio>
          </mu-list-item-content>
        </mu-list-item>
      </mu-list>
      <mu-button
        slot="actions"
        flat
        color="primary"
        @click="closeSimpleDialog()"
        >{{ $t("base.confirm") }}</mu-button
      >
    </mu-dialog>
    <!-- 多语言 -->
    <mu-popover cover :open.sync="langsOpen" :trigger="trigger">
      <mu-list>
        <mu-list-item
          button
          v-for="lang of langs"
          :key="lang.value"
          @click="changeLang(lang)"
          :class="{ langSelected: lang.selected }"
        >
          <mu-list-item-title>{{ lang.label }}</mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </mu-popover>
    <!-- 报错弹框 -->
    <mu-dialog
      :title="$t('message.message_login_networkerror')"
      width="360"
      max-width="500"
      :esc-press-close="false"
      :overlay-close="false"
      :open.sync="openAlert"
    >
      {{ $t("message.message_login_networktip") }}
      <mu-button
        slot="actions"
        flat
        color="primary"
        @click="networkerror_disagree"
        >{{ $t("base.cancel") }}</mu-button
      >
      <mu-button
        slot="actions"
        flat
        color="primary"
        @click="networkerror_agree"
        >{{ $t("base.confirm") }}</mu-button
      >
    </mu-dialog>
    <!-- 版权信息 -->
    <div class="login-copyright">
      <p style="margin-bottom: 0px; font-size: 12px">
        艾普工华科技（武汉）有限公司
      </p>
      Copyright&copy;2012-2021
    </div>
  </div>
</template>
<script>
import business from "@/utils/business_wms.js";
// load css
import _ from "lodash";
import Storage from "@/utils/storage.js";
import Static from "@/utils/static.js";

export default {
  name: "login",
  components: {},
  data: () => {
    return {
      user: {
        account: "",
        password: "",
        remember: true,
      },
      visibility: false,
      usernameText: "",
      passwordText: "",
      loginLoading: false,
      openFullscreen: false,
      linear: 0,
      openSimple: false,
      factoryList: [],
      factoryCode: "",
      langs: [
        { label: "中文", value: "cn", selected: true },
        { label: "English", value: "en", selected: false },
      ],
      langsOpen: false, // 多语言选项
      trigger: null,
      openAlert: false,
    };
  },
  computed: {
    selectLang() {
      let _selectLang = this.langs.find((v) => v.selected);
      return _selectLang.label;
    },
  },
  methods: {
    signIn() {
      if (!this.user.account) {
        this.usernameText = this.$i18n.t("message.message_login_inputusername");
        this.$refs.username.focus();
        return false;
      } else {
        this.usernameText = "";
      }
      if (!this.user.password) {
        this.passwordText = this.$i18n.t("message.message_login_inputpassword");
        this.$refs.password.focus();
        return false;
      } else {
        this.passwordText = "";
      }
      this.loginLoading = true;
      business
        .login({ url: "/login", data: this.user })
        .then((res) => {
          console.log(res);
          if (res.status == 200 && res.data.code == 200) {
            Storage.setItem("token", res.data.data.token);
            business
              .login({ url: "/login/info", data: this.user })
              .then((ret) => {
                if (ret.status == 200 && ret.data.code == 200) {
                  console.log(ret, 111111);
                  localStorage.setItem("userName", ret.data.account);
                  Storage.setObject("loginConfig", ret.data.data);
                  let lang = Storage.getObject("lang");
                  let mainPageParams = lang
                    ? Static["mainPageParams_" + lang.value]
                    : Static["mainPageParams_cn"];
                  window.api.openTabLayout(mainPageParams);
                }
              });
          } else {
            alert(JSON.stringify(res.data.msg));
          }
        })
        .catch((err) => {
          this.$toast.error({
            message:
              this.$i18n.t("message.message_login_networkerror") +
              ":" +
              JSON.stringify(err),
            close: true,
            time: 60000,
          });
          console.log(JSON.stringify(err));
        });
      // .finally(() => {
      this.loginLoading = false;
      // });
    },
    closeSimpleDialog() {
      if (!this.factoryCode) {
        this.$toast.warning({
          message: this.$i18n.t("message.message_login_choosefactory"),
          close: false,
        });
        return false;
      }
      let that = this;
      let resObj = _.find(this.factoryList, function (obj) {
        return obj.siteCode == that.factoryCode;
      });
      Storage.setObject("multipleObj", resObj);
      this.openSimple = false;
      if (!Storage.getObject("lang")) {
        Storage.setObject("lang", {
          label: "中文",
          selected: false,
          value: "cn",
        });
      }
      let lang = Storage.getObject("lang");
      let mainPageParams = lang
        ? Static["mainPageParams_" + lang.value]
        : Static["mainPageParams_cn"];
      window.api.openTabLayout(mainPageParams);
    },
    async getFactory() {
      try {
        let res = await business.getFactory();
        if (res.status == 200 && res.data.erroCode == 0) {
          this.factoryList = res.data.data;
          this.openSimple = true;
        } else {
          this.$toast.error({
            message: JSON.stringify(res.data.msg),
            close: false,
          });
        }
      } catch (error) {
        this.$toast.error({
          message: JSON.stringify(error),
          close: false,
        });
      }
    },
    changeLang(lang) {
      console.log(lang);
      this.$i18n.locale = lang.value;
      Storage.setObject("lang", lang);
      this.langs = this.langs.map((item) => {
        item.selected = item.value == lang.value;
        return item;
      });
      this.langsOpen = !this.langsOpen;
    },
    openAlertDialog() {
      this.openAlert = true;
    },
    networkerror_disagree() {
      this.openAlert = false;
    },
    networkerror_agree() {
      this.openAlert = false;
      window.api.openWin({
        name: "network",
        url: "./network.html",
        pageParam: {
          name: "",
        },
      });
    },
  },
  mounted() {
    // const myVersion = window.api.appVersion;
    let userObj = Storage.getObject("user");
    console.log(userObj);
    if (userObj != null) {
      let isRemeber = userObj.remember;
      if (isRemeber) {
        this.user.account = userObj.account;
        this.user.password = userObj.password;
        this.user.remember = userObj.remember;
      }
    }
    //设置语言选项
    let theLang = Storage.getObject("lang");
    if (theLang) {
      this.langs = this.langs.map((item) => {
        item.selected = item.value == theLang.value;
        return item;
      });
    }
    this.trigger = this.$refs.selectLangs.$el;
  },
};
</script>
<style scoped lang="scss">
.mu-input ::v-deep input.mu-text-field-input::-webkit-input-placeholder {
  color: red;
}
@media screen and (min-width: 320px) and (max-width: 414px) {
  @keyframes bg-move {
    0% {
      background-position-y: 0px;
    }
    50% {
      background-position-y: 100%;
    }
    100% {
      background-position-y: 0%;
    }
  }
  #app {
    height: 100vh;
    position: relative;
    min-height: 500px;
    background: aquamarine url("../../assets/img/7.15.2.jpg") center/120% 120%
      no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1px;
    background-position-y: 0px;
    animation: bg-move 30s infinite;
  }
}

@media screen and (min-width: 415px) {
  @keyframes bg-move {
    0% {
      background-position-y: 0px;
    }
    50% {
      background-position-y: 100%;
    }
    100% {
      background-position-y: 0%;
    }
  }
  #app {
    height: 100vh;
    position: relative;
    background: aquamarine url("../../assets/img/pad-2.jpg") center/120% 120%
      no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1px;
    background-position-y: 0px;
    animation: bg-move 30s infinite;
  }
}

.login-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 92%;
  padding: 20px 10px;
  border-radius: 18px;
  margin: 8vw 0;
  flex-shrink: 0;
  .mu-input,
  .check-box,
  .login-btn {
    width: 80vw;
  }
  .login-btn {
    margin-top: 8vw;
    padding: 20px;
    letter-spacing: 8px;
    background: linear-gradient(225deg, #00dcc0 0, #005af0 75%);
  }
  .login-img {
    margin: 6vw 0 8vw;
    img {
      width: 50%;
      margin: 0 auto;
    }
  }
}
.download-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  height: 80vh;
  width: 100vw;
  .linear-progress {
    width: 100%;
  }
  .percent {
    font-size: 12vw;
    color: rgb(76, 175, 80);
  }
}
.langSelected {
  background-color: #eee;
  .mu-item-title {
    color: #2196f3;
  }
}
.mu-checkbox {
  ::v-deep .mu-checkbox-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.login-copyright {
  color: white;
  position: absolute;
  bottom: 5px;
  text-align: center;
  font-size: 12px;
}
</style>